<template>
  <hcDialog
    dialogWidth="720px"
    :dialogTitle="
      isEdit
        ? $t('user.menuManagement.editMenu')
        : $t('user.menuManagement.newMenu')
    "
    customClass="hymson-dialog add-menu"
    :isVisable="visible"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="save(formRef)"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="add-menu-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item
            :label="$t('user.menuManagement.superiorMenu')"
            prop="parentId"
          >
            <el-tree-select
              v-model="form.parentId"
              :data="menu"
              node-key="id"
              :props="{ label: 'menuName', value: 'id' }"
              check-strictly
              :render-after-expand="false"
              show-checkbox
              check-on-click-node
              :placeholder="$t('user.menuManagement.superiorInfo')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            :label="$t('user.menuManagement.menuType')"
            prop="menuType"
          >
            <el-radio-group v-model="form.menuType">
              <el-radio :value="0">{{
                $t("user.menuManagement.content")
              }}</el-radio>
              <el-radio :value="1">{{
                $t("user.menuManagement.menu")
              }}</el-radio>
              <el-radio :value="2">{{
                $t("user.menuManagement.button")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.menuType != 2">
          <el-form-item
            :label="$t('user.menuManagement.menuIcon')"
            prop="menuIcon"
          >
            <el-popover placement="bottom-start" width="500" trigger="click">
              <IconSelect @selected="selected" />
              <template #reference>
                <el-input
                  slot="reference"
                  v-model="form.menuIcon"
                  :placeholder="$t('user.menuManagement.iconInfo')"
                  readonly
                >
                  <template #prefix>
                    <hcSvg
                      v-if="form.menuIcon"
                      :name="form.menuIcon"
                      size="20"
                    />
                    <el-icon v-else><Search /></el-icon>
                  </template>
                </el-input>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('user.menuManagement.menuName')"
            prop="menuName"
          >
            <el-input
              v-model="form.menuName"
              :placeholder="$t('user.menuManagement.nameInfo')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('user.menuManagement.displaySort')"
            prop="orderNum"
          >
            <el-input-number
              v-model="form.orderNum"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 2">
          <el-form-item prop="router">
            <template #label>
              <el-tooltip
                content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              路由地址
            </template>
            <el-input v-model="form.router" placeholder="请输入路由地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 2">
          <el-form-item prop="redirect">
            <template #label>
              <el-tooltip
                content="访问的路由重定向地址，格式与路由地址一样，如填写了重定向地址，则路由直接跳转该地址"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              重定向地址
            </template>
            <el-input v-model="form.redirect" placeholder="请输入重定向地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType == 1">
          <el-form-item prop="component">
            <template #label>
              <el-tooltip
                :content="$t('user.menuManagement.compoTooltip')"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              {{ $t("user.menuManagement.componentPath") }}
            </template>
            <el-input
              v-model="form.component"
              :placeholder="$t('user.menuManagement.compoInfo')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 0">
          <el-form-item prop="permissionCode">
            <el-input
              v-model="form.permissionCode"
              :placeholder="$t('user.menuManagement.authInfo')"
              maxlength="100"
            />
            <template #label>
              <el-tooltip
                :content="$t('user.menuManagement.permissionTooltip')"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              {{ $t("user.menuManagement.permissionChar") }}
            </template>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12" v-if="form.menuType == 1">
          <el-form-item prop="query">
            <el-input
              v-model="form.query"
              placeholder="请输入路由参数"
              maxlength="255"
            />
            <template #label>
              <el-tooltip
                content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              路由参数
            </template>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12" v-if="form.menuType != 2">
          <el-form-item prop="isLink">
            <template #label>
              <el-tooltip
                content="选择是外链则路由地址需要以`http(s)://`开头"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              是否外链
            </template>
            <el-radio-group v-model="form.isLink">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col :span="12" v-if="form.menuType != 2">
          <el-form-item prop="isShow">
            <template #label>
              <el-tooltip
                :content="$t('user.menuManagement.displayTooltip')"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              {{ $t("user.menuManagement.displayStatus") }}
            </template>
            <el-radio-group v-model="form.isShow">
              <el-radio :value="true">{{ $t("common.show") }}</el-radio>
              <el-radio :value="false">{{ $t("common.hide") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 2">
          <el-form-item prop="state">
            <template #label>
              <el-tooltip
                :content="$t('user.menuManagement.menuTooltip')"
                placement="top"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
              {{ $t("user.menuManagement.menuStatus") }}
            </template>
            <el-radio-group v-model="form.state">
              <el-radio :value="true">{{ $t("common.normal") }}</el-radio>
              <el-radio :value="false">{{ $t("common.disable") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('user.menuManagement.remark')" prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              :placeholder="$t('common.remarkInfo')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </hcDialog>
</template>

<script setup name="MenuDialog">
import { reactive, ref, toRefs, computed, watch } from "vue";
import { emptyId } from "@/utils/index";
import IconSelect from "@/components/icon-select";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();

const emit = defineEmits(["onSure", "onCancel"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  // 是否为编辑
  isEdit: {
    type: Boolean,
    default: false, // 默认为新增菜单
  },
  // 点击列表中的新增s时，传入当前菜单
  curMenu: {
    type: Object,
    default: () => {
      return {};
    },
  },
  treeMenu: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const menu = computed(() => {
  return [
    {
      menuCode: emptyId,
      menuName: "根类目",
      parentId: emptyId,
      id: emptyId,
      children: props.treeMenu,
    },
  ];
});

// 表单校验
const rules = {
  menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
  orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
  router: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
};

const formRef = ref();

const data = reactive({
  form: {
    parentId: "", // 上级菜单
    menuName: "", // 菜单名称
    menuIcon: "", // 菜单图标
    menuType: 0, // 菜单类型
    orderNum: 0, // 菜单顺序
    permissionCode: "", // 权限字符
    isLink: false, // 是否外链
    state: true, // 菜单状态
    isShow: true, // 显示状态
    router: "", // 路由地址
    redirect: "", // 重定向地址
    component: "", // 组件路径
    remark: "", // 备注
  },
});

watch(
  () => props.visible,
  (val) => {
    if (val) {
      const curMenu = JSON.parse(JSON.stringify(props.curMenu));
      data.form.parentId = props.curMenu
        ? props.isEdit
          ? curMenu.parentId
          : curMenu.id
        : emptyId;
    }
  }
);

watch(
  () => props.isEdit,
  (val) => {
    // true 编辑
    if (val) {
      const curMenu = JSON.parse(JSON.stringify(props.curMenu));
      for (let key in data.form) {
        data.form[key] = curMenu[key];
      }
    }
  }
);

const save = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      const curMenu = JSON.parse(JSON.stringify(props.curMenu));
      const obj = {
        params: JSON.parse(JSON.stringify(data.form)),
        curMenuId: curMenu?.id,
      };
      emit("onSure", obj);
      closeFun();
    }
  });
};

const closeFun = () => {
  formRef.value.resetFields();
  data.form = {
    parentId: "", // 上级菜单
    menuName: "", // 菜单名称
    menuIcon: "", // 菜单图标
    menuType: 0, // 菜单类型
    orderNum: 0, // 菜单顺序
    permissionCode: "", // 权限字符
    isLink: false, // 是否外链
    state: true, // 菜单状态
    isShow: true, // 显示状态
    router: "", // 路由地址
    redirect: "", // 重定向地址
    component: "", // 组件路径
    remark: "", // 备注
  };
  emit("onCancel");
};

// 选择图标
const selected = (name) => {
  data.form.menuIcon = name;
};

const { form } = toRefs(data);
</script>

<style lang="scss">
.add-menu.el-dialog {
  .add-menu-ruleForm {
    padding: 0 20px 0 0;
    .el-form-item__label {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      .el-select,
      .el-input,
      .el-input-number {
        width: 100%;
      }
    }
  }
}
</style>
